<script setup lang="ts">
import { ArrowDown } from "@element-plus/icons-vue";
import { ref } from "vue";

defineProps<{
  chapter: any;
}>();
// 折线图
const option = {
  tooltip: {},
  xAxis: {
    type: "category",
    data: ["测试一", "测试二", "测试三"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [80, 90, 85],
      type: "line",
    },
  ],
};
const isExpand = ref(false);

const show = () => {
  isExpand.value = !isExpand.value;
};
</script>

<template>
  <el-card>
    <div class="text-20px font-bold">{{ chapter.title }}</div>
    <div class="flex justify-between">
      <div>
        <p>学习时长：{{ chapter.duration }}</p>
        <div class="relative mb-20px flex items-center gap-10px">
          <div>学习进度:</div>
          <el-progress type="circle" :percentage="chapter.progress" :width="50" />
        </div>
      </div>
      <ECharts height="300px" width="400px" :options="option" />
      <div>
        <div
          class="cursor-pointer flex items-center gap-5px hover:text-sky-6 duration-200"
          @click="show"
        >
          <span>{{ !isExpand ? "展开" : "收起" }}</span>
          <el-icon class="duration-200" :class="{ 'rotate-180': isExpand }">
            <ArrowDown />
          </el-icon>
        </div>
      </div>
    </div>
    <!--正确率折线图-->
    <div class="grid gridRow0 duration-200" :class="{ gridRow1: isExpand }">
      <div class="min-h-0 overflow-hidden">
        <el-divider />
        <el-timeline class="max-w-800px">
          <el-timeline-item
            v-for="item in chapter?.children"
            :timestamp="item.time"
            placement="top"
          >
            <el-card body-class="flex justify-between items-center">
              <div class="grow">
                <h4>{{ item.title }}</h4>
                <div class="relative mb-20px flex items-center gap-10px">
                  <div>熟练度:</div>
                  <el-progress class="flex w-50%" :percentage="item.progress" />
                </div>
              </div>
              <div></div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.gridRow0 {
  grid-template-rows: 0fr;
}
.gridRow1 {
  grid-template-rows: 1fr;
}
</style>
